<template>
    <div class="all">

        <van-nav-bar title="星值兑换" left-arrow @click-left="$router.push('main')" class="header" />

        <div class="nav">
            <div class="my_xing">
                <span>我的星值<span>{{ $store.state.duan.xing }}</span></span>
                <router-link to="">
                    <span class="a" @click="chufa1">星值记录</span>
                </router-link>
            </div>
            <div class="nav_a"></div>
            <ul class="nav_b">
                <li v-for="x in 5">
                    <!-- <div @click="chufa"> -->
                    <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" class="tu_a" />
                        </template>
                    </van-image>

                    <!-- </div> -->

                    <div class="p">【立赚￥199】漫步者科比不低啊u是</div>
                    <span class="sp">
                        <van-icon name="cash-back-record" />200.00 <span>去置换</span>
                    </span>

                </li>
                <li v-for="x in 5">
                    <!-- <div @click="chufa"> -->
                    <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" class="tu_a" />
                        </template>
                    </van-image>

                    <!-- </div> -->

                    <div class="p">【立赚￥199】漫步者科比不低啊u是</div>
                    <span class="sp">
                        <van-icon name="cash-back-record" />200.00 <span>去置换</span>
                    </span>

                </li>

            </ul>
        </div>

    </div>
</template>
<script>
import api from '@/api'


export default {
    data() {
        return {
            list: '',
            xingZhi: '',

        }
    },
    created() {
        this.xing();
    },
    methods: {
        chufa() {
            this.$router.push({ name: 'xingxiang' })
        },
        chufa1() {
            this.$router.push({ name: 'xingji' })
        },
        async xing() {
            let id = this.$store.state.bian.data;
            let res = await api.xingCha(id);
            console.log(res.data.data.integral);
            this.xingZhi = res.data.data.integral;
            this.$store.commit("duan/setXing", this.xingZhi);
        }

    },
}
</script>
<style scoped>
.header {
    position: sticky;
    top: 0;
}

.nav {
    width: 100%;
    height: 100%;
    background-color: rgb(248, 248, 248);
    display: flex;
    justify-content: center;
    padding-top: 2%;
    flex-wrap: wrap;
    align-content: flex-start;
}

.my_xing {
    width: 90%;
    height: 10%;
    top: 5%;
    font-size: 14px;
    background-color: #fff;
    display: flex;
    padding: 0 5%;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 20px; */
    border-radius: 5px;
}

.nav_a {
    margin: 20px 0;
    width: 90%;
    height: 100px;
    background-color: rgb(207, 206, 206);
    border-radius: 10px;
    overflow: hidden;
}

.nav_b {
    width: 90%;
    height: 60%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.nav_b>li {
    width: 45%;
    display: flex;
    flex-wrap: wrap
}

.a {
    color: black;
}

.p {
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sp {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    font-size: 14px;
}

.sp>span {
    border: 1px solid;
}

/* .header {
    width: 100%;
    background-color: rgba(248, 248, 248, 100);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 50;
}

.fanhui {
    color: black;
    font-size: 23px;
    font-weight: bolder;
    left: 10px;
    top: 10px;
}

h1 {
    margin-top: 10px;
}

.all {
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
}

.nav {
    width: 100%;
    height: 90%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    background-color: rgba(239, 239, 239, 100);
    overflow: hidden;
    overflow-y: auto;
}

.my_xing {
    width: 80%;
    height: 10%;
    background-color: #fff;
    border-radius: 10px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.a {
    color: #555;
    font-size: 16px;
}

.nav_a {
    margin-top: 5%;

    width: 80%;
    height: 15%;
    background-color: rgba(206, 206, 206, 100);
    border-radius: 10px;
}

.nav_b {
    width: 80%;
    height: 85%;

    margin-top: 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}

.nav_b>li {
    width: 45%;
    height: 40%;
    background-color: blue;
    display: flex;
    flex-wrap: wrap;
    margin-top: 5%;
}

.nav_b>li>:nth-child(1) {
    width: 100%;
    height: 70%;
    background-color: #fff;
    display: flex;
}

.nav_b>li>:nth-child(2) {
    width: 100%;
    height: 30%;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap
}


.p {
    display: flex;
    width: 100%;
    height: 20px;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sp {
    display: block;
    width: 100%;
    height: 60%;
    display: flex;
    font-size: 16px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: space-between;

}

.btn {
    width: 40%;
    height: 70%;
    font-size: 12px;

} */
</style>